.Vipbox{
    position: fixed;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--back-color);
    overflow-y: scroll;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    .topbox{
        position: fixed;
        top: 0;
        left: 100%;
        transition: all 0.3s ease-in-out;
    }
    &.show{
        left: 0;
        .bottompay{
            left: 0;
        }
        .topbox{
            left: 0;
        }
    }
    .contentbox{
        box-sizing: border-box;
        width: 100%;
        padding: 19px;
    }
    .topblankbox{
        height: 60px;
        width: 100%;
    }
    .free{
        overflow: hidden;
        width: 100%;
        border-radius: 14px;
        position: relative;
        background: linear-gradient(to right,#e2e3e4 10%,#f0f0f1 );
        padding: 20px;
        box-sizing: border-box;
        h4{
            color: #333;
            font-size: 18px;
            font-weight: bold;
        }
        .freetips{
            font-size: 14px;
            color: var(--tip-color);
            margin-top: 8px;
        }
        .decoration{
            position: absolute;
            width: 50%;
            right: 0;
            top: -46px;
            
            img{
                width: 100%;
            }
        }
    }
    .pay{
        margin-top: 15px;
        width: 100%;
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        background-color: var(--vip-color);
        .toppaybox{
            font-size: 16px;
            font-weight: bold;
            overflow: hidden;
            padding: 20px;
            color: #6a5128;
            height: 55px;
            box-sizing: border-box;
            background: linear-gradient(to right,#e5c999 10%,#f6e9d1);
            .decoration{
                position: absolute;
                width: 50%;
                right: 0;
                top: -46px;
                img{
                    width: 100%;
                }
            }
        }
        .bottompaybox{
            box-sizing: border-box;
            width: 100%;
           .bottompaybox-flexbox{
               box-sizing: border-box;
               padding:  16px;
               display: flex;
               width: 100%;
               justify-content: space-between;
               border-bottom: 1px solid var(--border-color);
               &:last-child{
                   border-bottom: none;
               }
               .bottompaybox-minbox{
                   flex: 1;
                   display: flex;
                   align-items: center;
                   .vipicon{
                       width: 36px;
                       height: 36px;
                       border-radius: 50%;
                       overflow: hidden;
                       img{
                           width: 100%;
                       }
                   }
                   .vipcontent{
                       margin-left: 7px;
                       p{
                           color: var(--viptips-color);
                           font-size: 12px;
                       }
                       h5{
                           font-weight: bold;
                           margin-top: 4px;
                           font-size: 14px;
                           color: var(--viptitle-color);
                       }
                   }
               }
           } 
        }
    }
    .blankbox{
        height: 310px;
        width: 100%;
    }
    .bottompay{
        transition: all 0.3s ease-in-out;
        box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.08);
        height: 310px;
        width: 100%;
        border-radius: 16px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        box-sizing: border-box;
        padding: 19px;
        position: fixed;
        bottom: 0;
        left: 100%;
        background-color: var(--vipbottom-color);
        .mouthvip{
            border-radius: 12px;
            padding: 16px;
            background: linear-gradient(to right,#e5c999 10%,#f9e7c9);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .mouthvipleft{
                color: #6a5128;
                h5{
                    font-size: 14px;
                }
                p{
                    font-size: 12px;
                    margin-top: 8px;
                }
            }
            .mouthvipright{
                width: 86px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                font-size: 14px;
                color: #6a5128;
                font-weight: bold;
                border-radius: 1000px;
                background: linear-gradient(to right,#e3ceaa 10%,#f0deba);
            }
        }
        .price{
            display: flex;
            margin-top: 11px;
            .priceminbox{
                flex: 1;
                margin-right: 11px;
                box-sizing: border-box;
                padding: 16px;
                border-radius: 12px;
                height: 105px;
                color: var(--font-color);
                background-color: var(--vippriceunchoose-color);
                &.con{
                    color: var(--viptitle-color);
                    background-color: var(--vippricechoose-color);
                    .priceavg{
                        color: var(--viptips-color);
                    }
                }
                .pricetitle{
                    font-size: 16px;
                    font-weight: bold;
                }
                .pricedetail{
                    font-size: 20px;
                    margin-top: 7px;
                    font-weight: bold;
                }
                .priceavg{
                    margin-top: 2px;
                    color: var(--tips-color);
                    font-weight: bold;
                }
                &:last-child{
                    margin-right: 0px;
                }
            }
        }
        .pricetips{
            margin-top: 11px;
            font-size: 12px;
            color: var(--tips-color);
            line-height: 1.5;
        }
    }
}